<include file="public@header" />
<style>
	.nav-tabs li a{color: #18BC9C;}
	#list-table{font-size: 14px;background: #fff;background: #fff; }
</style>
</head>
<body style="padding-top: 0px;font-size: 12px;background: #fff;background: #fff;">
	<div id="directory-tree">
		<div style="padding: 20px;">
			<h3>选择要备份的文件</h3>
			<table class="table table-hover table-bordered table-list" id="list-table">
				<thead>
					<tr>
						<td width="50%">勾选&nbsp;&nbsp;<a href="javascript:;" style="display:none;" class="op-btn" onclick="selectAll();">全选</a>&nbsp;&nbsp;<a href="javascript:;" style="display:none;" class="op-btn" onclick="selectAllClear();">全不选</a>&nbsp;&nbsp;<a href="javascript:;" style="display:none;" class="op-btn" onclick="unSelect();">反选</a></td>
						<td>路径</td>
					</tr>
				</thead>
				<tbody id='table-dir-tbody'>
				</tbody>
			</table>
			
		</div>
	</div>

	<script src="__STATIC__/js/admin.js"></script>
	<script src="__STATIC__/js/layer/layer.js"></script>
	<script>
	    $(document).ready(function() {
	        Wind.css('treeTable');
	        Wind.use('treeTable', function() {
	            $("#list-table").treeTable({
	                indent : 20
	            });
	        });
	    });
	</script>


	<script>
		
	</script>
	<script>
		//当前层
		var currentLevel = 0;
		//缩进
		let indent = 20;
		//读取层级
		let getLevel = 3;
		
		var requestStart = 0 ;
		var requestEnd = 0;
		
		let cid = {$id} ;
		
		$(document).ready(function(){
			$('.op-btn').hide();
			showMsg();
			getDir();
		});
		//获取目录
		var getDir = function( dir = "" , parent_id   ){
			requestStart ++ ;
			var url = "{:url('admin/companyBackup/getDir')}?addr_api="+"{$addr_api}"+"&dir="+dir+"&cid="+cid;
			$.get( url , function(data){
				data = JSON.parse(data);
				/*if(data.code != 200 ){
					clearInterval(timeIndex);
					document.write("数据获取失败,无法执行后续操作，提示信息："+data.message);
					return false; 
				}*/
				requestEnd ++ ;
				
	
				let icon  = ( data.code == 200 ) ? 1 : 5 ;
				if( icon == 1 ){
					addNode( data.data , dir  , parent_id  );
				}
			});
		}
		//添加节点到页面
		var addNode = function( list , dir , parent_id = '1' ){
			var hasChildrenNodeDir = [];
			var nodeIds = [];
			var level = 1;
			if( parent_id != '1' ){
				var arr = parent_id.split('-');
				level = arr.length;
			}
			currentLevel = level;
			$.each(list , function(index , value ){
				var id = parent_id+"-"+index;
				var nodeAdd = ( parent_id == 1 ) ? 'table-dir-tbody' : parent_id;
				createNode( dir , id , value , nodeAdd , level );
				if( value.node ==1 ){
					hasChildrenNodeDir.push(dir+'/'+value.name);
					nodeIds.push(id);
				} 
			});

			if( level < getLevel ){
				for( var i = 0 ; i < hasChildrenNodeDir.length ; i ++ ){
					getDir( hasChildrenNodeDir[i] , nodeIds[i] );
				};
			}
		}

		var dirIcon = ["glyphicon-menu-right","glyphicon-menu-down"];
		//生成节点
		var createNode = function( dir , parent, node , nodeAdd , level ){
			let path = dir+'/'+node.name;
			var display = ""
			if(level != 1){display="display:none;"}
			var tr = '<tr id="'+parent+'" class="'+nodeAdd+'" style="'+display+'" >';
				var icon = '<span class="glyphicon glyphicon-folder-close"></span>';
				if( node.node == 0 ){
					icon = '<span class="glyphicon glyphicon-list-alt"></span>';
				}
				var di = ( node.node == 1 ) ? '<span class="dir-icon-btn switch-off  glyphicon  '+dirIcon[0]+'" style="width:12px;cursor:pointer;"></span>' : '<span class="glyphicon" style="width:12px;"></span>';
				if ( level >= getLevel ) di = '<span class="glyphicon" style="width:12px;"></span>';
				tr += '<td style="padding-left:'+level*indent+'px;">'+di+'&nbsp;&nbsp;<lable><input class="ck-cls-node" type="checkbox" style="cursor:pointer;" name="ck_node" value="">'+icon+'&nbsp;'+node.name+'</lable></td>';
				tr += '<td >'+path+'</td>';
			tr += '</tr>';
			if( nodeAdd == "table-dir-tbody" ){
				$('#'+nodeAdd).append( tr );
			}else{
				$('#'+nodeAdd).after( tr );
			}
			
		}

		//设置目录图表点击事件
		$(document).on( 'click' , '.dir-icon-btn' , function(){
			changeDirIconStyle($(this));
			var tr = $(this).parents('tr');
			var switchs = 'on'
			if($(this).hasClass('switch-off')){
				switchs = 'off';	
			}
			var list = getChildrenList( $(tr) , switchs );
			if( list.length == 0 && switchs == 'on' ){
				layer.msg( '当前节点没有子级目录或目录未加载...' , function(){} );
			}
		});

		//复选框勾选事件
		$(document).on( 'change' , '.ck-cls-node' , function(){

			var tr = $(this).parents('tr');
			var cked = $(this).is(':checked');
			var list = getChildrenList($(tr),'',true);
			
			for ( var i = 0 ; i < list.length ; i ++ ){
				var item = list [i];
		
				item.find('.ck-cls-node').prop('checked' , cked );
			}

		});

		//切换目录图标样式
		var changeDirIconStyle = function( node , switchs = '' ){
			if( switchs == '' ){
				node.toggleClass('glyphicon-menu-right')
				node.toggleClass('glyphicon-menu-down');
				node.toggleClass('switch-off');
			}else if(switchs == 'off'){
				node.removeClass('glyphicon-menu-down');
				node.addClass('glyphicon-menu-right')
				node.addClass('switch-off');
			}else if(switchs == 'on'){
				node.removeClass('glyphicon-menu-right');
				node.addClass('glyphicon-menu-down');
				node.removeClass('switch-off');
			}
			
		}
		//获取当前目录下的子级id
		var getChildrenList = function( tr , switchs , readOnlyList = false , list = [] ){
			let parent = tr.attr('id');
			var childrens = $(document).find('.'+parent);
			
			$.each( childrens , function(){
				if( !readOnlyList ){
					if( switchs == 'off' ){
						$(this).css('display','none');
					}else{
						$(this).css('display','');
					}
					changeDirIconStyle($($(this).find('.dir-icon-btn')) , switchs );
				}

				list.push($(this));
				list = getChildrenList( $(this) , switchs , readOnlyList , list );
			});

			return list;
		}

		//全选
		var selectAll = function(){
			$('input[name=ck_node]').each(function(){
				$(this).prop('checked',true);
			});
		}
		//全不选
		var selectAllClear = function(){
			$('input[name=ck_node]').each(function(){
				$(this).prop('checked',false);
			});
		}
		//反选
		var unSelect = function(){
			$('input[name=ck_node]').each(function(){
				var ck = ($(this).is(':checked'))?false:true;
				$(this).prop('checked',ck);
			});
		}

		//保存数据
		var saveData = function(){
			var list = [];
			var num  = 0;
			$(document).find('.ck-cls-node').each(function(){
				num++;
				if( !$(this).is(':checked') ){
					var path = $(this).parents('tr').find('td:eq(1)').text();
					list.push(path);
				}
			});
			
			if( num != 0 && num == list.length  ){
				return -1;
			}
			return list;
		}
				
		var timeIndex = null;
		//
		var showMsg = function(){
			timeIndex = setInterval( function(){
				console.log("还在获取目录，别慌");
				if( currentLevel == getLevel && requestStart == requestEnd ){
					clearInterval( timeIndex );
					$('.op-btn').show();
					console.log("加载完毕～");
				}
			} , 500 );
		}
		
	</script>
</body>
</html>